﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="user_list_vue.aspx.cs" Inherits="Template.Web.Admin.user_list_vue" %>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>应急处置列表</title>
    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <link href="../css/bootstrap-reset.css" rel="stylesheet" />
    <!--external css-->
    <link href="../assets/font-awesome/css/font-awesome.css" rel="stylesheet" />


    <!-- Custom styles for this template -->
    <link href="../css/style.css" rel="stylesheet" />
    <link href="../css/style-responsive.css" rel="stylesheet" />
    <link href="../assets/toastr-master/toastr.css" rel="stylesheet" />
    <!-- 按需加载 -->
    <link rel="stylesheet" href="/scripts/blockui/blockUI.css" />
    <link rel="stylesheet" href="../css/jquery.dataTables.css" />
    <link rel="stylesheet" type="text/css" href="/scripts/datepicker/css/bootstrap-datepicker3.min.css" />
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
      <script src="../js/html5shiv.js"></script>
      <script src="../js/respond.min.js"></script>
    <![endif]-->
    <!-- style 2784行 修改，对齐datatables左下角 info 和 length
    .dataTables_length, .dataTables_filter {
        padding: 0 0 15px;
    }
    -->
</head>
<body>
    <section class="wrapper site-min-height">
        <!-- page start-->
        <div class="col-lg-12">
            <section class="panel panel-primary">
                <header class="panel-heading">
                    <i class="fa fa-filter"></i>
                    查询内容
             <span class="tools pull-right">
                 <button class="btn btn-success btn-sm"><i class="fa fa-filter"></i>搜索</button>
                 <button class="btn btn-default btn-sm"><i class="fa fa-undo"></i>重置</button>
             </span>
                </header>
                <div class="panel-body">
                    <form class="form-horizontal" role="form">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="control-label col-md-3">用户名称</label>

                                    <div class="col-md-9">
                                        <input type="text" class="form-control" placeholder="" id="userName" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="control-label col-md-3">手机号码</label>

                                    <div class="col-md-9">
                                        <input type="text" class="form-control" placeholder="" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="control-label col-md-3">身份证号</label>

                                    <div class="col-md-9">
                                        <input type="text" class="form-control" placeholder="" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="control-label col-md-3">出生日期</label>

                                    <div class="col-md-9">
                                        <div class="input-group input-daterange range_datetime" id="">
                                            <input type="text" class=" form-control" readonly="" id="timeStart" name="timeStart" />
                                            <span class="input-group-addon">到</span>
                                            <input type="text" class=" form-control" readonly="" id="timeEnd" name="timeEnd" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="control-label col-md-3">是否删除</label>

                                    <div class="col-md-9">
                                        <select name="" id="isDelete" class="form-control">
                                            <option value="">===请选择===</option>
                                            <option value="Y">已删除</option>
                                            <option value="N">正常</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
            </section>
            <section class="panel panel-primary">
                <header class="panel-heading">
                    <i class="fa fa-cogs"></i>
                    数据列表
             <span class="tools pull-right">
                 <button id="btnAdd" class="btn btn-success btn-sm"><i class="fa fa-plus"></i>新增</button>
                 <button class="btn btn-primary btn-sm"><i class="fa fa-pencil-square-o"></i>编辑</button>
                 <button class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i>删除</button>
                 <button class="btn btn-info btn-sm"><i class="fa fa-search"></i>查看</button>
                 <button class="btn btn-warning btn-sm"><i class="fa fa-refresh"></i>刷新</button>
                 <button class="btn btn-info btn-sm"><i class="fa fa-file-text-o"></i>导入</button>
             </span>
                </header>
                <div class="panel-body">
                    <section>
                        <table class="table table-striped table-hover table-bordered" id="myDataTable">
                            <thead>
                                <tr>
                                    <th style="width: 30px;">
                                        <%--<input id="checkall" type="checkbox" value="" />--%>
                                        编号
                                    </th>
                                    <th>用户姓名</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </section>
                </div>
            </section>
        </div>
        <!-- page end-->
    </section>

    <!-- js placed at the end of the document so the pages load faster -->
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/assets/toastr-master/toastr.js"></script>
    <!-- 按需加载 -->
    <script src="/scripts/blockui/jquery.blockUI.js"></script>
    <script type="text/javascript" src="/scripts/datatables/jquery.dataTables.js"></script>
    <script type="text/javascript" src="/scripts/datatables/dataTables.bootstrap.js"></script>
    <script type="text/javascript" src="/scripts/datepicker/js/bootstrap-datepicker.min.js"></script>
    <script src="/scripts/util/myUtil2.js"></script>
    <script type="text/javascript" src="/scripts/myJsPlugin/listPlugin.js"></script>

    <script>
        $(document).ready(function () {
            'use strict';
            // 配置插件
            var myListPlugin = new ListPlugin({
                // 处理程序url
                handlerUrl: 'handler/userHandler.ashx',
                // 获取列表额外参数
                listParams: {
                    action: 'list',
                    userName: $('#userName').val(),
                    isDelete: $('#isDelete').val()
                },
                // 列
                columns: [
                    {
                        data: 'id'

                    },
                    {
                        data: "userName"

                    },
                    {
                        data: "id"
                    }
                ],
                // 行绘制回调函数
                rowCallback: function (row, data, index) {
                },
                // 行创建回调函数
                createdRow: function (row, data, dataIndex) {
                    var html = '<button class="btn btn-xs btn-success btnRowView"><i class="fa fa-search">查看</i></button>';
                    html += '  <button class="btn btn-xs btn-info btnRowEdit"><i class="fa fa-pencil-square-o">编辑</i></button>';
                    html += '  <button class="btn btn-xs btn-danger btnRowDelete"><i class="fa fa-trash-o">删除</i></button>';
                    $('td:eq(2)', row).html(html);
                },
                // 表格重绘回调函数
                drawCallback: function (settings) {
                    $("#checkall").prop("checked", false);
                },
                // 表格初始化结束后回调函数
                initCompleteOther: function (settings, json, myDataTable) {
                    // 给最后一列按钮添加点击事件
                    // 查看
                    $('#myDataTable tbody').on('click', '.btnRowView', function () {
                        var data = myDataTable.row($(this).parents('tr')).data();
                        //window.self.location.href = 'user_view.aspx?id=' + data.id;
                        window.self.location.href = 'user_view_vue.aspx?id=' + data.id;
                    });

                    // 编辑
                    $('#myDataTable tbody').on('click', '.btnRowEdit', function () {
                        var data = myDataTable.row($(this).parents('tr')).data();
                        //window.self.location.href = 'user_modify.aspx?id=' + data.id;
                        window.self.location.href = 'user_modify_vue.aspx?id=' + data.id;
                    });

                    // 删除
                    $('#myDataTable tbody').on('click', '.btnRowDelete', function () {
                        var data = myDataTable.row($(this).parents('tr')).data();

                        myUtil.blockUI({
                            target: '#myDataTable',
                            message: '删除中，请稍等...'
                        });

                        $.when($.ajax({
                            url: 'handler/userHandler.ashx',
                            type: "post",
                            data: {
                                action: 'delete',
                                id: data.id
                            },
                            dataType: "json"
                        })).done(function (data) {
                            toastr.success('删除成功！');
                            // 刷新表格
                            myDataTable.ajax.reload();
                        }).always(function () {
                            myUtil.unblockUI('#myDataTable');
                        });
                    });
                }
            });

            // 重写单击事件绑定
            myListPlugin.bindClickEvent = function () {
                // 添加按钮事件
                $('#btnAdd').on('click', function () {
                    window.self.location.href = 'user_modify_vue.aspx?state=has';
                });

            };

            // 重写其他事件绑定
            myListPlugin.bindOtherEvent = function () {
                // 日期范围控件
                $(".range_datetime").datepicker({
                    format: "yyyy-mm-dd",
                    todayBtn: "linked",
                    clearBtn: true,
                    language: "zh-CN",
                    autoclose: true,
                    todayHighlight: true,
                    toggleActive: true
                });
            };

            // 初始化插件
            myListPlugin.init();

        });


    </script>




</body>
</html>



